<template>
  <div style="margin: 0 auto">
    <div style="display:flex; margin:20px 60px;width:1200px">
      <BasicForm @register="registerForm" style="width:1000px"/>
      <a-button type="primary" v-on:click="handleSubmit">查询</a-button>
    </div>




    <div v-for="(item,index) in traces" :key="item.id">
      <div style="margin: 0 auto; width:100px;display:flex;" v-if="index==0">
        <div style="width:51px"></div>
        <div class="singleArrow">
        </div>
      </div>
    <div style="display:flex;" v-if="index%2==0">
      <div style="margin: 0 auto;display:flex;">
        <div style="width:310px;height:100px;"></div>
    <div style="width:5px;height:200px;background-color: black"></div>
        <div style="margin-top:95px;width:100px;height:5px;background-color: black"></div>
      <div style="margin-left:0px;width:200px;height:200px">
        <div>时间:{{item.recordTime}}</div>
        <div>地点:{{item.cameraName}}</div>
        <div><img :src="item.photo"></div>
      </div>
      </div>
    </div>

    <div style="display:flex;" v-if="index%2==1">>
      <div style="margin: 0 auto;display:flex;">
        <div style="margin-left:0px;width:200px;height:200px;">
          <div>时间:{{item.recordTime}}</div>
          <div>地点:{{item.cameraName}}</div>
          <div><img :src="item.photo"></div>
        </div>
        <div style="margin-top:95px;width:100px;height:5px;background-color: black"></div>
        <div style="width:5px;height:200px;background-color: black"></div>
        <div style="width:300px;height:100px;"></div>
      </div>
    </div>
    </div>

    <div v-for="i in (4-traces.length)" v-if="(4-traces.length)>0 && traces.length>0"  style="margin: 0 auto;display:flex;">
      <div style="margin: 0 auto;display:flex;">
        <div style="margin: 0 auto;display:flex;">
        <div style="margin-left:0px;width:10px;height:200px;">
        </div>
        <div style="width:5px;height:200px;background-color: black"></div>
        </div>
      </div>
    </div>

  <!--  <div style="margin: 0 auto;width:5px;height:100px;background-color: black"></div>
    <div style="margin: 0 auto;width:5px;height:100px;background-color: black"></div>
    <div style="margin: 0 auto;width:5px;height:100px;background-color: black"></div>
    <div style="margin: 0 auto;width:5px;height:100px;background-color: black"></div>
    <div style="margin: 0 auto;width:5px;height:100px;background-color: black"></div>-->
  </div>
</template>

<script lang="ts" name="trace-tracePhoto" setup>
  import {ref, reactive, computed, unref} from 'vue';
  import {BasicTable, useTable, TableAction} from '/@/components/Table';
  import {useModal} from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage'
  import TracePhotoModal from './components/TracePhotoModal.vue'
  import {columns, searchFormSchema, superQuerySchema} from './TracePhoto.data';
  import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './TracePhoto.api';
  import { downloadFile } from '/@/utils/common/renderUtils';
  import {BasicForm} from '/@/components/Form/index';
  import { useUserStore } from '/@/store/modules/user';
  import {useForm} from "@/components/Form";
  import {useMessage} from "@/hooks/web/useMessage";
  const queryParam = reactive<any>({});
  const checkedKeys = ref<Array<string | number>>([]);
  const userStore = useUserStore();
  //注册model
  const [registerModal, {openModal}] = useModal();
  //注册table数据

  const [registerForm, {setProps,resetFields, setFieldsValue, validate,getFieldsValue}] = useForm({
    labelWidth: 150,
    schemas: searchFormSchema,
    showActionButtonGroup: false,
    baseColProps: {span: 12},
    fieldMapToNumber: [
    ],
    fieldMapToTime: [
      ['createTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD HH:mm:ss'],
    ],
  });

  const { createMessage, createErrorModal,createWarningModal,createInfoModal } = useMessage();
  /**
   * 高级查询事件
   */
  const traces = reactive([]);
  async function handleSubmit(v) {
    try {
      let values = await validate();
      if(!values.personId){
        createMessage.warn("请先选择一个人员作为条件");
        return ;
      }
      //提交表单
      let res = await list(values);
      console.log(res);
      traces.splice(0,traces.length);
      res?.forEach((item,index)=>{
        traces.push(item);
      });
      console.log(traces)
    } finally {
    }
  }
   /**
    * 新增事件
    */
  function handleAdd() {
     openModal(true, {
       isUpdate: false,
       showFooter: true,
     });
  }
   /**
    * 编辑事件
    */
  function handleEdit(record: Recordable) {
     openModal(true, {
       record,
       isUpdate: true,
       showFooter: true,
     });
   }
   /**
    * 详情
   */
  function handleDetail(record: Recordable) {
     openModal(true, {
       record,
       isUpdate: true,
       showFooter: false,
     });
   }


</script>

<style scoped>
  .singleArrow {
    width: 10px;
    height: 5px;
    position: relative;

    background-color: black;
     transform: rotate(-90deg);  /* 旋转角度 */
  }
  .singleArrow::after {
    content: '';
    display: block;
    position: absolute;
    right: -20px;  /* 箭头位置 */
    top: -8px;  /* 箭头位置 */
    border-top: 10px solid transparent; 	/* 箭头高低 */
    border-bottom: 10px solid transparent; /* 箭头高低 */
    border-left: 20px solid black; /* 箭头长度*/
  }
</style>
